<!DOCTYPE html>
<html lang="zh">
<head>
    <#include "common/head.ftl">
    <link rel="stylesheet" href="${staticUrl}/css/Exam.css">
</head>
<body>
<#assign question_no= 1>
<div class="pracontent">
    <div class="examHead bor">
        <!--试卷的信息-->
        <h2 class="h2">${exam.name}</h2>
        <div class="info">
            <p>◇ 本卷用于${exam.classes}</p>
            <p>◇ 本卷共分为${choices?size}个选择题 , ${words?size + excels?size + ppts?size}个操作题</p>
            <p>◇ 请在考试时间内点击交卷，否则成绩作废！</p>
            <p></p>
        </div>
        <div class="select layui-clear" style="position: relative; z-index: 10">
            <div class="select-sub">
                <div class="navbox">
                    <a href="javascript:;" id="option"class="layui-btn layui-btn-small layui-btn-danger">选择题</a>
                    <a href="javascript:;" id="word"  class="layui-btn layui-btn-small">Word</a>
                    <a href="javascript:;" id="excel" class="layui-btn layui-btn-small">Excel</a>
                    <a href="javascript:;" id="ppt"   class="layui-btn layui-btn-small">PPT</a>
                </div>
            </div>
        </div>
        <div class="drop-con layui-clear">
            <div class="pra-left-con">
                <div id="questionModule">
                    <#if choices?? && (choices?size>0) >
                    <div class="m_rule">
                        <div class="select-title questionModule">${question_no}、选择题(每小题1分。共20分)</div>
                        <#assign question_no= question_no + 1>
                    </div>
                    <ul class="m_select">
                        <#list choices as item>
                        <li>
                            <div class="subject-con">
                                <div class="sub-content">
                                    <div class="sub-title"><em>${item_index +1}</em><span>[单选题]</span>${item.title}</div>
                                    <div class="sub-answer">
                                        <i id="result_${item_index}"  class="result_answer result_wrong"></i>
                                        <dl class="select_questions">
                                            <dd><input type="radio" name="${item_index}" value="A" data-edit="${item.id}"><label><span>A.</span>${item.optionA}</label></dd>
                                            <dd><input type="radio" name="${item_index}" value="B" data-edit="${item.id}"><label><span>B.</span>${item.optionB}</label></dd>
                                            <dd><input type="radio" name="${item_index}" value="C" data-edit="${item.id}"><label><span>C.</span>${item.optionC}</label></dd>
                                            <dd><input type="radio" name="${item_index}" value="D" data-edit="${item.id}"><label><span>D.</span>${item.optionD}</label></dd>

                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </#list>
                    </ul>
                </#if>
                <#if words?? && (words?size>0 )>
                <div class="m_rule">
                    <div class="select-title look_word" >${question_no}、Word处理题(30分)</div>
                    <#assign question_no= question_no + 1>
                </div>
                <ul class="m_ruleQuest">
                    <#list words as item>
                    <li>
                        <div class="subject-con">
                            <div class="sub-content">
                                <div class="sub-title">
                                    <em>${item_index +1}</em>
                                    <span>[Word操作题]</span>
                                </div>
                                <dl class="sub-answer vsub-con">
                                    <dd>
                                        <p class="oper_tit">请点击以下链接下载素材到本地计算机，然后阅读下面的题目作答。完成后保存并关闭文档，点击题目下方的“上传文件” 按钮提交</p>
                                    </dd>
                                    <div class="download">
                                        <div class="dl_info">
                                            <p><i class="layui-icon">&#xe601;</i>点击按钮，下载试题</p>
                                            ${item.sourceUrl}
                                        </div>
                                    </div>
                                    <dd>
                                        ${item.title}
                                    </dd>

                                    <div class="pull_txt">
                                        <input id="input-${item.id}" type="file" accept=".docx" style="display:none"/>
                                        <button id="btn-${item.id}" data-index="word${item_index}" type="button" class="layui-btn bar-btn">
                                            <i class="layui-icon">&#xe67c;</i>上传文件
                                        </button>
                                        <span class="remind"></span>
                                        <div id="progress-${item.id}" class="layui-progress load-bar" lay-showpercent="true">
                                            <div class="layui-progress-bar" lay-percent="0%"></div>
                                        </div>
                                        <span id="remind-${item.id}"></span>
                                    </div>

                                </dl>
                            </div>
                        </div>
                    </li>
                </#list>
                </ul>
            </#if>
            <!--Excel start-->
            <#if excels?? && (excels?size>0)>
            <div class="m_rule">
                <div class="select-title look_excel" >${question_no}、Excel处理题(30分)</div>
                <#assign question_no= question_no + 1>
            </div>
            <ul class="m_ruleQuest">
                <#list excels as item>
                <li>
                    <div class="subject-con">
                        <div class="sub-content">
                            <div class="sub-title">
                                <em>${item_index +1}</em>
                                <span>[Excel操作题]</span>
                            </div>
                            <dl class="sub-answer vsub-con">
                                <dd>
                                    <p class="oper_tit">请点击以下链接下载素材到本地计算机，然后阅读下面的题目作答。完成后保存并关闭文档，点击题目下方的“上传文件” 按钮提交</p>
                                </dd>
                                <div class="download">
                                    <div class="dl_info">
                                        <p><i class="layui-icon">&#xe601;</i>点击按钮，下载试题</p>
                                        ${item.sourceUrl}
                                    </div>
                                </div>
                                <dd>
                                    ${item.title}
                                </dd>

                                <div class="pull_txt">
                                    <input id="input-${item.id}" type="file" accept=".xlsx" style="display:none"/>
                                    <button id="btn-${item.id}" data-index="excel${item_index}" type="button" class="layui-btn bar-btn">
                                        <i class="layui-icon">&#xe67c;</i>上传文件
                                    </button>
                                    <span class="remind"></span>
                                    <div id="progress-${item.id}" class="layui-progress load-bar" lay-showpercent="true">
                                        <div class="layui-progress-bar" lay-percent="0%"></div>
                                    </div>
                                    <span id="remind-${item.id}"></span>
                                </div>
                            </dl>
                        </div>
                    </div>
                </li>
            </#list>
            </ul>
        </#if>
        <!--Excel end-->

        <!--PPT start-->
        <#if ppts?? && (ppts?size>0)>
        <div class="m_rule">
            <div class="select-title look_ppt" >${question_no}、PPT处理题(30分)</div>
            <#assign question_no= question_no + 1>
        </div>
        <ul class="m_ruleQuest">
            <#list ppts as item>
            <li>
                <div class="subject-con">
                    <div class="sub-content">
                        <div class="sub-title">
                            <em>${item_index +1}</em>
                            <span>[PowerPoint操作题]</span>
                        </div>
                        <dl class="sub-answer vsub-con">
                            <dd>
                                <p class="oper_tit">请点击以下链接下载素材到本地计算机，然后阅读下面的题目作答。完成后保存并关闭文档，点击题目下方的“上传文件” 按钮提交</p>
                            </dd>
                            <div class="download">
                                <div class="dl_info">
                                    <p><i class="layui-icon">&#xe601;</i>点击按钮，下载试题</p>
                                    ${item.sourceUrl}
                                </div>
                            </div>
                            <dd>
                                ${item.title}
                            </dd>

                            <div class="pull_txt">
                                <input id="input-${item.id}" type="file" accept=".pptx" style="display:none"/>
                                <button id="btn-${item.id}" data-index="ppt${item_index}" type="button" class="layui-btn bar-btn">
                                    <i class="layui-icon">&#xe67c;</i>上传文件
                                </button>
                                <span class="remind"></span>
                                <div id="progress-${item.id}" class="layui-progress load-bar" lay-showpercent="true">
                                    <div class="layui-progress-bar" lay-percent="0%"></div>
                                </div>
                            </div>
                        </dl>
                    </div>
                </div>
            </li>
        </#list>
        </ul>
    </#if>
    <!--PPT end-->
</div>
</div>
<div class="pra-right-con">
    <div id="m_rightPart" class="par-right-con-sub bor">
        <!--右侧区域-->
        <div class="time-card">
            <!--倒计时-->
            <div class="y-time">
                <div class="time-item">
                    <strong id="hour_show">0时</strong>
                    <strong id="minute_show">0分</strong>
                    <strong id="second_show">0秒</strong>
                </div>
            </div>
            <!--答题卡主要部分-->
            <div class="rightArea-answer">
                <div id="answer-card">
                    <div class="hd clearfix">
                        <div class="title">
                            答题卡
                        </div>
                    </div>
                    <div class="db layui-clear">
                        <dl class="panel-item">
                            <dt>选择题<em>(每题1分，共20分)</em></dt>
                            <dd class="panel-order">
                                <#list choices as item>
                                <a href="javascript:;" data-id="${item_index}">${item_index + 1}</a>
                            </#list>
                            </dd>
                        </dl>
                        <dl class="panel-item">
                            <dt>wrod<em>(每题30分，共30分)</em></dt>
                            <dd class="panel-order">
                                <#list words as item>
                                <a href="javascript:;" data-index="word${item_index}">${item_index +1}</a>
                            </#list>
                            </dd>
                        </dl>
                        <dl class="panel-item">
                            <dt>Excel<em>(每题30分，共30分)</em></dt>
                            <dd class="panel-order">
                                <#list excels as item>
                                <a href="javascript:;" data-index="excel${item_index}">${item_index +1}</a>
                            </#list>
                            </dd>
                        </dl>
                        <dl class="panel-item">
                            <dt>PowerPoint<em>(每题20分，共20分)</em></dt>
                            <dd class="panel-order">
                                <#list ppts as item>
                                <a href="javascript:;" data-index="ppt${item_index}">${item_index +1}</a>
                            </#list>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="answer-color">
                    <div class="panel-order-notice">
                        <em>已做</em>
                        <i class="doit"></i>
                        <em>未做</em>
                        <i></i>
                    </div>
                </div>
                <div class="btn-sub">
                    <a href="javascript:;" class="end_test">交卷</a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>
<script src="${staticUrl}/plugins/jquery/jquery-3.2.1.min.js"></script>
<script src="${staticUrl}/plugins/layui/layui.all.js"></script>
<script type="text/javascript">
    layui.use('element', function(){
        var element = layui.element;
    });
    $(".navbox a").on("click",function () {
        $(this).addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
    })

	   setInterval(function(){
    	$.get({
    		url:'${rootUrl}'+'/ping'
    	})
    },60*1000)

    //根据锚点平滑过渡
    function getTop(){
        console.log($(".navbox").hasClass("nav-fix"));
        if($(".navbox").hasClass("nav-fix"))
            return 60;
        return 100;
    }

    //关于滚动的事件
    $(function () {
        var oNavbox = $(".navbox").offset().top;//导航条的top
         var oAnswer = $(".time-card").offset().top;//右侧答题卡加倒计时的top
         var ovtop = $(document).scrollTop();

        if(ovtop>oNavbox){
            $(".navbox").addClass("nav-fix");
        }
        if(ovtop+100 > oAnswer){
                $(".time-card").addClass("time_fixed");
            }
        $(window).scroll(function () {
         var vtop = $(document).scrollTop();
            if( (vtop+100)<= oAnswer && oAnswer<($(window).scrollTop()+$(window).height())){
                $(".time-card").removeClass("time_fixed");

            }else {

                $(".time-card").addClass("time_fixed");
            }

            if(vtop <= oNavbox && oNavbox <($(window).scrollTop()+$(window).height())){
                $(".navbox").removeClass("nav-fix");
            }else {
                $(".navbox").addClass("nav-fix");
            }
        });

        if($(window).height()<670){
                var maxH = $(window).height()-330<0?0:$(window).height()-330;
                $(".rightArea-answer .db").css("max-height",maxH);
            }

        if($(".look_word").length && $(".look_excel").length && $(".look_ppt").length){

            $("#option").on("click",function () {
                 $('html, body').animate({scrollTop: $('.questionModule').offset().top-90}, 500);
             });
            $("#word").on("click",function () {
                var theTop = getTop();
                $('html, body').animate({scrollTop: $('.look_word').offset().top-theTop}, 500);
            });
            $("#excel").on("click",function () {
                var theTop = getTop();
                $('html, body').animate({scrollTop: $('.look_excel').offset().top-theTop}, 500);
            });
            $("#ppt").on("click",function () {
                var theTop = getTop();
                $('html, body').animate({scrollTop: $('.look_ppt').offset().top-theTop}, 500);
            });

            var oWord = $(".look_word").offset().top; // word的导航条
            var oExcel = $(".look_excel").offset().top;//excel的导航条
            var oPPt = $(".look_ppt").offset().top;//ppt的导航条


            if(ovtop <= oWord-115){
                $("#option").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }else if(ovtop <= oExcel-115){
                $("#word").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }else if(ovtop <= oPPt - 115){
                $("#excel").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }else{
                $("#ppt").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }

             $(window).scroll(function () {
            var vtop = $(document).scrollTop();
            //滚动条的锚点变化
            if(vtop <= oWord-115){
                $("#option").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }else if(vtop <= oExcel-115){
                $("#word").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }else if(vtop <= oPPt - 115){
                $("#excel").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }else{
                $("#ppt").addClass("layui-btn-danger").siblings().removeClass("layui-btn-danger");
            }


        })

        }


    })
    //处理屏幕height过小的问题
    $(window).resize(function () {

        $(".rightArea-answer .db").css("max-height",500);
        if($(window).height()<670){
            var maxH = $(window).height()-330<0?0:$(window).height()-350;
            $(".rightArea-answer .db").css("max-height",maxH);
        }
    })


    var lastTime = ${lastTime}
    //var intDiff = parseInt(60*120);//倒计时总秒数量
	var intDiff = lastTime
    function timer(intDiff){
        window.setInterval(function(){
            hour=0,
                minute=0,
                second=0;//时间默认值
            if(intDiff > 0){
                  day = Math.floor(intDiff / (60 * 60 * 24));
                   hour= Math.floor(intDiff / (60 * 60)) - (day * 24);
                  hour1 = Math.floor(intDiff/ (60 * 60));
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#hour_show').html('<s id="h"></s>'+hour1+'时');
            $('#minute_show').html('<s></s>'+minute+'分');
            $('#second_show').html('<s></s>'+second+'秒');
            intDiff--;
            if(intDiff == 900){
            	 layer.open({
                    time: 5000, //5s后自动关闭
                    area: ['300px', '180px'],
                    content:'<div style="padding:20px 0 0 20px;color:#000000;font-size: 24px">'+'您还有十五分钟交卷'+'</div>',
                    skin: 'layer-ext-moon'
                });
            }
        }, 1000);
    }

    $(function(){
        timer(intDiff);
    });
    //关于dd的事件委托

    $(".select_questions").on("click","dd",function () {
        $(this).children("input:first-child").prop("checked", true);
        var id = $(this).children("input:first-child").attr("name");
        $('.panel-order a[data-id='+id+']').addClass("finish");
        $('.panel-order a[data-id='+id+']').css("background","#b1b6bf");
    })

    $(".panel-order ").on("click","a",function () {
        var name =  $(this).attr("data-id");
        if(name){
        var count;
        if($(".navbox").hasClass("nav-fix")){
            count = 130;
        }else{
            count = 160;
        }
        $('html, body').animate({scrollTop: $(".select_questions input[name="+name+"]").offset().top-count}, 500);
        }
    })


    $(".bar-btn").on("click",function(){
        var id = $(this).attr("data-index")
        $('.panel-order a[data-index='+id+']').addClass("finish");
        $('.panel-order a[data-index='+id+']').css("background","#b1b6bf");
    })


    //自定义进度条


    $('.bar-btn').on('click',function(e){
        console.log(e)
        var obj = e.currentTarget
        console.log(obj)
        var id = obj.id
        console.log(id)
        var inputId = id.replace('btn','input')
		var index = $(this).attr("data-index");
		index = index.substr(index.length-1,1);
		console.log(index);
        var inputEle = $('#'+inputId)
        inputEle.unbind('change');
        inputEle.on('change',function(e){
            $(obj).attr('disabled','true')
            $(obj).css('background','grey')
            console.log('change input')
            upload(inputEle,index);
        })
        inputEle.click()
    })

    function upload(x,index){
        var file = x[0].files[0];
        var progressId = x.attr('id').replace('input','progress')
        var btnId = progressId.replace('progress','btn')

        var progress = $('#'+progressId)
        var btn = $('#'+btnId)
        var span = btn.next();

        if(! file){
            btn.attr("disabled",false);
            btn.css("background","#009688")
            alert('请选择文件')
            return
        }
        span.text("");
        var form = new FormData()
        form.append('file',file)
        var xhr = new XMLHttpRequest();
        xhr.open("post", '${rootUrl}/api/receiveOptionQuestion?index='+index, true);
        xhr.onload = function () {
            btn.attr("disabled",false);
            btn.css("background","#009688")

            var result = JSON.parse(xhr.responseText);
            console.log(result);
            if(result){

                setTimeout(function(){
                    progress.css("display","none");
                },500)

            }
            switch (result['code']){
                case 'success':
                    span.text("上传成功");
                    console.log(123);
                    break;
                case 'login':

                    break;
                case 'errorFile':
                    span.text(result['msg']);
                    break;
                case 'overSize':
                    span.text(result['msg']);
                    break;
                case 500:
                    span.text(result['msg']);
                    break;
            }

        };
        xhr.upload.addEventListener("progress", function(e){
            progress.css("display","block");
            var load = (e.loaded/e.total*100).toFixed(2) + '%';
            //progress[0].attr('lay-percent',"10%")
            console.log(1);
            progress.css('background-color','#009688');
            progress.width(load);
            progress.css('text-align','right')
            progress.text(load);
        }, false);
        xhr.send(form);
    }

    //交卷
    $(".end_test").on('click',function(){

        var select_arr = {};
        var length = $(".panel-order a").length;
        console.log(length);
        var finish = $(".finish").length;
        console.log(finish);
        var flag = confirm("您还有"+(length-finish)+"道题没有做，确认提交吗？");
        if(flag){
        	$(".end_test").css("background","grey");
        	$('.end_test').unbind("click")
            $(".select_questions dd input:checked").each(function(){
                var value = $(this).val();

                var dataId = '' +$(this).attr("data-edit");
                select_arr[dataId]= value;
            })
            post_arr(select_arr);

        }else{
            //不交卷我也没办法，接着做
        }

    })

    function post_arr(arr) {
        //post访问数据
        $.post({
            url:'${rootUrl}/exam',
            dataType:'text',
            //data:{"choices":arr},
            data:arr,
            success:function (resText) {
           	 console.log(resText);
                var result = JSON.parse(resText);

                if(result['code']=='success'){
					alert("交卷成功");
					location.reload();
                }else{
                    alert("交卷失败,考试结束");
                    location.reload();
                }
            }

        })
    }

</script>
</body>
</html>